<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">申请注册</text>
		</uni-nav-bar>
		<view class="body flex-c ac bottom-ios" v-if="phone">
			<text class="text-secondary color-grey">发送验证短信到以下手机号</text>
			<text class="phone mt20">{{hidePhone(phone)}}</text>
			<form ref="form" class="form">
				<view class="input-box flex-r ac">
					<input class="input text-regular" name="smscode" type="number" @input="checkSmsCode" placeholder="请输入验证码" placeholder-style="color:#B3B3B3;" v-model="smscode" :focus="codefocus" :maxlength="6"/>
					<text class="text-regular color-blue" @tap="sendSmsCode">{{sendText}}</text>
				</view>
				<view class="error-message text-small color-red" v-if="errorMsg">
					<text>{{errorMsg}}</text>
				</view>
				<view class="submit-box">
					<button type="default" :class="{'active': canSubmit}" @tap="submitReset">提交申请</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import imMsg from "@/utils/common/message.js";
	export default {
		data() {
			return {
				phone: '', //手机号
				smscode: '', //验证码
				
				codefocus: false, //验证码输入框聚焦
				canSubmit: false, //是否可以提交
				isSend: false, //验证码发送状态
				isSubmit: false, //是否已经提交

				sendText: '获取验证码', //发送验证码提示文字
				errorMsg: '' //错误信息
			}
		},
		onLoad() {
			if(this.$Route.query.phone){
				this.phone = this.$Route.query.phone
				//登录后回跳地址
				this.redirectTo = this.$CHS.getRedirectTo()
			}else{
				console.log('非法请求');
				this.$CHS.errorRequest('index', '数据请求错误，请返回重试')
			}
		},
		onUnload() {
			if(this.timer){
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			//手机号隐藏部分信息
			hidePhone(phone){
				return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},
			//发送短信验证码
			sendSmsCode() {
				if(this.isSend){
					return
				}
				if(this.phone == '' || this.phone.length != 11){
					uni.showToast({
						title: '手机号码不正确',
						icon: 'none'
					});
					return
				}
				this.isSend = true
				this.sendText = '发送中...'
				this.$CHS.sendSmsCode({
					phone: this.phone,
					term: 'user',
					type: 0 //0 .登录模板、1.注册模板、2.忘记密码模板
				}).then((res)=>{
					let time = 60
					this.sendText = '重新获取 ' + time + 's'
					this.timer = setInterval(()=>{
						time = time - 1
						if(time === 0){
							clearInterval(this.timer)
							this.isSend = false
							this.timer = null
							this.sendText = '获取验证码'
						}else{
							this.sendText = '重新获取 ' + time + 's'
						}
					}, 1000)
					this.codefocus = true
				}).catch((err)=>{
					this.isSend = false
					this.sendText = '获取验证码'
				})
			},
			//验证码本地校验
			checkSmsCode(e) {
				if (e.detail.value.length == 6) {
					this.canSubmit = true
					this.errorMsg = ''
				}else{
					this.canSubmit = false
				}
			},
			//提交申请
			submitReset() {
				if(!this.canSubmit) {
					uni.showToast({
						title: '请输入正确的验证码',
						icon: 'none',
					})
					return
				}
				if(this.isSubmit){
					return
				}
				this.isSubmit = true
				//设置专家邀请码
				let loginModel = this.$CHS.getInviteCode()
				this.$http.post({
					url: '/api/applyUserSmsLogin',
					data:{
						smscode: this.smscode,
						username: this.phone,
						term: 'user',
						...loginModel
					}
				}).then((data)=>{
					if(data.success && data.result){
						//保存用户信息
						this.$store.commit('SET_USERINFO', data.result)
						//更新IM用户资料，跳转首页或来源页面
						setTimeout(()=>{
							imMsg.login(data.result.userInfo).then((ready) => {
								this.isSubmit = false
								//登录成功提示
								this.$ShowToast({text: '登录成功'})
								//查询优惠活动
								this.$CHS.getCouponActivity(data.result.userInfo.userId)
								//跳转网址
								if(data.result.userInfo.isFirstRegistration === true){
									this.$Router.replaceAll({name: 'followseason'})
								}else if(this.redirectTo){
									this.$Router.replaceAll(this.redirectTo)
								}else{
									this.$Router.replaceAll({name: 'index'})
								}
							}).catch((err)=>{
								this.isSubmit = false
								//登录提示
								this.$ShowToast({text: '登录失败，请重试', type: 2, time: 3})
								this.$store.commit('SET_USERINFO', {})
							})
						}, 200)
					}else{
						this.isSubmit = false
						this.errorMsg = data.message || '验证码错误，请重新输入验证码'
						uni.showToast({
							title: this.errorMsg,
							icon: 'none'
						})
					}
				}).catch((err)=>{
					console.log(err);
					this.isSubmit = false
					uni.showToast({
						title: '操作失败，请稍后重试',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
		.body {
			width: 100%;
			margin: 60rpx 0 0;
			.phone{
				font-size: 36rpx;
			}
			.form{
				width: inherit;
				margin-top: 60rpx;
				.input-box{
					padding: 0 20rpx;
					background: #FFFFFF;
					.input{
						flex: 2;
						border: none;
						height: 96rpx;
					}
				}
				.error-message{
					margin: 20rpx 20rpx 0;
					font-size: 26rpx;
					line-height: 26rpx;
				}
				.submit-box{
					margin: 40rpx 20rpx;
				}
			}
		}
	}
</style>
